import Snip from './snip.js'

let translate = (x, y) => {
    return `translate(${x}px, ${y}px) `
}

let scale = (x, y) => {
    return `scale(${x}, ${y})`
}
let rotate3d = (x, y, z) => {
    let _x = x ? `rotateX(${x}deg)` : ''
    let _y = y ? `rotateY(${y}deg)` : ''
    let _z = z ? `rotateZ(${z}deg)` : ''
    return `${_x} ${_y} ${_z}`
}

let TSR = (t3D, s3D, r3D) => {
    if (!t3D && !s3D && !r3D) return null
    let _t = 'translate(0px, 0px)'
    let _s = ''
    let _r = ''
    if (t3D && t3D !== 0) {
        _t = translate(t3D[0], t3D[1])
    }
    if (s3D && s3D !== 0) {
        _s = scale(s3D[0], s3D[1])
    }
    if (r3D && r3D !== 0) {
        _r = rotate3d(r3D[0], r3D[1], r3D[2])
    }
    return _t + _s + _r
}


let sty = {
    randomColor: function () {
        let g = parseInt(Math.random() * 256)
        let b = parseInt(Math.random() * 256)
        return `rgba(0,${g},${b},0.5)`
    },
    font: (s, w, c = null, textAlign = 'center') => {
        let sty = {
            fontSize: s,
            fontWeight: w,
            textAlign: textAlign
        }
        if (c !== null) {
            sty = {
                ...sty,
                color: c
            }
        }
        return sty
    },
    img: (str, w = '100%', h = null, scale = false) => {
        if (h === null) h = w
        return {
            backgroundRepeat: 'no-repeat', //space no-repeat round space
            backgroundPosition: 'center',
            backgroundSize: scale === false ? 'contain' : 'cover',
            backgroundImage: `url(${str})`,
            width: w,
            height: h,
        }
    },
    imgBackground: (str) => {
        return {
            ...sty.full(),
            backgroundRepeat: 'no-repeat', //space no-repeat round space
            backgroundPosition: 'center',
            backgroundSize: '100% 100%',
            backgroundImage: `url(${str})`,
            width: '100%',
            height: '100%',
        }
    },
    TSR: (t, s, r) => {
        return {
            MsTransform: TSR(t, s, r),	/* IE 9 */
            MozTransform: TSR(t, s, r), 	/* Firefox */
            OTransform: TSR(t, s, r), 	/* Opera */
            WebkitTransform: TSR(t, s, r),
            transfrom: TSR(t, s, r),
        }
    },
    gradient: (deg = 0, colorA = '#00f', colorB = '#f00') => {
        return {
            background: `linear-gradient(${deg}deg, ${colorA} 0%, ${colorB} 100%)`,
        }
    },
    full: () => {
        return {
            ...sty.box(),
            position: 'fixed',
            left: 0,
            top: 0,
            right: 0,
            bottom: 0,
        }
    },
    pos: (str = 's') => {
        let posiStr = 'static'
        if (str === 's') posiStr = 'static'
        else if (str === 'f') posiStr = 'fixed'
        else if (str === 'r') posiStr = 'relative'
        else if (str === 'a') posiStr = 'absolute'
        else if (str === 'y') posiStr = 'sticky'
        return {
            position: posiStr
        }
    },
    btn: () => {
        return {
            cursor: 'pointer'
        }
    },
    topbar: () => {
        return {
            position: 'fixed',
            left: 0,
            top: 0,
            width: '100%',
            height: '44px',
            zIndex: 1,
        }
    },
    bottomBar: () => {
        return {
            position: 'fixed',
            left: 0,
            bottom: 0,
            width: '100%',
            height: '44px',
            zIndex: 1,
            color: '#fff',
            backgroundColor: 'rgba(40,40,140,0.5)',
        }
    },
    h: () => {
        return {
            boxOrient: 'horizontal',
            WebkitBoxOrient: 'horizontal',
            MozBoxOrient: 'horizontal',
        }
    },
    v: () => {
        return {
            boxOrient: 'vertical',
            WebkitBoxOrient: 'vertical',
            MozBoxOrient: 'vertical',
        }
    },
    f: (value) => {
        return {
            flex: value,
            boxFlex: value,
            WebkitBoxFlex: value,
            MozBoxFlex: value,
        }
    },
    box: (orient = 'v', align = 'center', pack = 'center') => {
        let _orient = orient === 'v' ? 'vertical' : 'horizontal'
        return {
            boxOrient: _orient,
            WebkitBoxOrient: _orient,
            MozBoxOrient: _orient,
            display: '-moz-box',
            display: '-webkit-box',
            display: '-webkit-flex',
            display: '-moz-flex',
            display: '-ms-flexbox',
            display: '-ms-flex',
            display: 'flex',
            display: 'box',
            display: '-webkit-box',
            boxAlign: align,
            WebkitBoxAlign: align,
            boxPack: pack,
            WebkitBoxPack: pack,
        }
    },
    radius: (topLeft = 1, topRight = null, bottomLeft = null, bottomRight = null) => {
        topRight = topRight || topLeft
        bottomLeft = bottomLeft || topLeft
        bottomRight = bottomRight || topLeft
        return {
            borderTopLeftRadius: topLeft,
            borderTopRightRadius: topRight,
            borderBottomRightRadius: bottomLeft,
            borderBottomLeftRadius: bottomRight,
        }
    },
    boxSizing: () => {
        return {
            boxSizing: 'border-box',
            MozBoxSizing: 'border-box',
            WebkitBoxSizing: 'border-box',
        }
    },
    border: (arrow = 'all', width, color, style = 'solid') => {
        if (arrow === 'all') {
            return {
                borderStyle: style,
                borderWidth: width,
                borderColor: color,
            }
        }
        if (arrow === 't') {
            return {
                borderTopStyle: style,
                borderTopWidth: width,
                borderTopColor: color,
            }
        } else if (arrow === 'r') {
            return {
                borderRightStyle: style,
                borderRightWidth: width,
                borderRightColor: color,
            }
        } else if (arrow === 'l') {
            return {
                borderLeftStyle: style,
                borderLeftWidth: width,
                borderLeftColor: color,
            }
        } else if (arrow === 'b') {
            return {
                borderBottomStyle: style,
                borderBottomWidth: width,
                borderBottomColor: color,
            }
        }
    },
    opengl: () => {
        return {
            // transformStyle: 'preserve-3d',
            perspective: '800px',
        }
    }
}

export default sty